<template>
    <div>
        <page-header :title="$route.meta.title" content="" />
        <page-main>
            <search-bar>
                <el-form :model="form" size="small" label-width="100px" label-suffix="：">
                    <el-row>
                        <el-col :span="8">
                            <el-form-item label="订单编号">
                                <el-input v-model="form.name" placeholder="请输入订单编号" clearable @keydown.enter.native="refresh" @clear="refresh" />
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-form-item>
                        <el-button type="primary" icon="el-icon-search" @click="refresh">筛 选</el-button>
                    </el-form-item>
                </el-form>
            </search-bar>
            <el-table ref="table" v-loading="loading" class="list-table" :data="listData" border stripe highlight-current-row>
                <el-table-column label="商品信息" width="300">
                    <template slot-scope="scope">
                        <div class="goods-info">
                            <el-image :src="scope.row.cover" :preview-src-list="[scope.row.cover]" style="width: 50px; height: 50px; margin-right: 10px;" fit="contain" />
                            <div class="goods-info-main">
                                <el-popover placement="top" trigger="hover" width="300" :content="scope.row.title">
                                    <div slot="reference" class="goods-title">
                                        <b>{{ scope.row.title }}</b>
                                    </div>
                                </el-popover>
                                <div>订单编号:{{ scope.row.updated_at }}</div>
                            </div>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="name" label="店铺" align="center" />
                <el-table-column prop="name" label="商家" align="center" />
                <el-table-column prop="" label="售后编号" align="center" />
                <el-table-column prop="" label="订单编号" align="center" />
                <el-table-column prop="" label="买家昵称" align="center" />
                <el-table-column prop="" label="状态" align="center" />
                <el-table-column prop="" label="售后类型" align="center" />
                <el-table-column prop="" label="退货物流单号" align="center" />
                <el-table-column label="申请时间" width="200" align="center">
                    <!-- <template slot-scope="scope">
                        <el-switch v-model="scope.row.status" :active-value="1" :inactive-value="0" @change="onChangeStatus(scope.row)" />
                    </template> -->
                </el-table-column>
                <el-table-column label="操作" width="200" align="center">
                    <template slot-scope="scope">
                        <el-button type="primary" size="mini" plain @click="onView(scope.row)">查看</el-button>
                        <el-button type="danger" size="mini" plain @click="onDel(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                :current-page.sync="page.page"
                :total="page.total"
                :page-size.sync="page.size"
                :page-sizes.sync="page.sizes"
                layout="total, sizes, ->, prev, pager, next, jumper"
                background
                @size-change="refresh"
                @current-change="getDataList"
            />
        </page-main>
        <FormDialog :id="detailFormDialog.id" :visible.sync="detailFormDialog.visible" :view="formView" @success="getDataList" />
    </div>
</template>

<script>
import mixin from '@/mixins/mixin'
import FormDialog from './components/FormDialog/index.vue'
export default {
    components: {
        FormDialog
    },
    mixins: [mixin],

    data() {
        return {
            listData: [
                {name: 11111111}
            ],
            dialogMode: false,
            pageRouter: {
                create: 'goodsAdd',
                edit: 'goodsEdit'
            },
            form: {
                username: '',
                nickname: '',
                mobile: ''
            }
            // api: {
            //     list: 'product/product/tabulation',
            //     del: 'product/product/delete',
            //     changeStatus: 'product/product/change-status'
            // }
        }
    },
    created() {
        this.getDataList()
    }

}
</script>

<style lang="scss">
.goods-info {
    display: flex;
    padding: 5px;
    border: 1px dashed #ececec;
    background-color: #fff;
    border-radius: 4px;
}
.goods-info-main {
    flex: 1;
}
.goods-title {
    margin-bottom: 3px;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
</style>
